<template>
    <div class="panel-main">
        <div class="panel-row">
            <div>标题：</div>
            <Input :value="model?.label" class="panel-input" @change="change($event, 'label', 'input')"/>
        </div>
        <div class="panel-row">
            <div>线宽：</div>
            <Input :value="model?.lineWidth" type="number" class="panel-input"
                   @change="change($event, 'lineWidth', 'input')"/>
        </div>
        <div class="panel-row" v-if="type === 'quadratic'">
            <div>控制点1：</div>
            <div class="panel-sub-row">
                <span>X轴：</span>
                <Input :value="x1" type="number" @change="setControlPoint($event, 'x1')"/>
            </div>
            <div class="panel-sub-row">
                <span>Y轴：</span>
                <Input :value="y1" type="number" @change="setControlPoint($event, 'y1')"/>
            </div>
        </div>
        <div class="panel-row" v-if="type === 'quadratic'">
            <div>控制点2：</div>
            <div class="panel-sub-row">
                <span>X轴：</span>
                <Input :value="x2" type="number" @change="setControlPoint($event, 'x2')"/>
            </div>
            <div class="panel-sub-row">
                <span>Y轴：</span>
                <Input :value="y2" type="number" @change="setControlPoint($event, 'y2')"/>
            </div>
        </div>
        <div class="panel-row">
            <div>是否虚线显示：</div>
            <Checkbox :value="model?.isDash" @change="change($event, 'isDash', 'checkbox')"/>
        </div>
        <div class="panel-row" v-if="type !== 'quadratic'">
            <div>有否动画显示：</div>
            <Checkbox :value="model?.isAnimate" @change="change($event, 'isAnimate', 'checkbox')"/>
        </div>
        <div class="panel-row">
            <div>是否有箭头：</div>
            <Checkbox :value="model?.isArrow" @change="change($event, 'isArrow', 'checkbox')"/>
        </div>
        <div class="panel-row">
            <div>颜色：</div>
            <Input :value="model?.color" class="panel-input" type="color" @change="change($event, 'color', 'input')"/>
        </div>
    </div>
</template>
<script>
    import {Input, Checkbox} from "ant-design-vue";

    export default {
        name: 'Line',
        props: {
            selectedShape: {
                type: Object
            },
            type: {
                type: String,
                default: 'line'
            }
        },

        watch: {
            selectedShape: {
                handler: function (shape) {
                    const item = shape.graph.findById(shape.itemId);
                    this.model = item.getModel();
                    if(this.model.controlPoints){
                        this.x1 = this.model.controlPoints[0].x;
                        this.y1 = this.model.controlPoints[0].y;
                        this.x2 = this.model.controlPoints[1].x;
                        this.y2 = this.model.controlPoints[1].y;
                    }
                },
                deep: true
            }
        },

        components: {
            Input,
            Checkbox
        },

        data() {
            return {
                model: {},
                x1: '',
                y1: '',
                x2: '',
                y2: ''
            }
        },

        mounted() {
        },

        methods: {
            change(e, key, type) {
                switch (type) {
                    case 'input':
                        this.setValue(e.target.value, key);
                        break;
                    case 'checkbox':
                        this.setValue(e.target.checked, key);
                        break;
                    default:
                        this.setValue(e.target.value, key);
                        break;
                }
                const item = this.selectedShape.graph.findById(this.selectedShape.itemId);
                this.$emit('change', item.getModel());
            },

            setValue(value, key) {
                if (key === 'width' || key === 'height') {
                    this[key] = value;
                } else {
                    this.model[key] = value
                }
            },

            /**
             * 设置控制点
             * @param e
             */
            setControlPoint(e, key){
                this[key] = e.target.value;
                const item = this.selectedShape.graph.findById(this.selectedShape.itemId);
                const model = {...item.getModel(), controlPoints: [
                        {x: parseInt(this.x1), y: parseInt(this.y1)},
                        {x: parseInt(this.x2), y: parseInt(this.y2)}
                    ]
                }
                this.$emit('change', model);
            }
        }
    }
</script>
<style scoped lang="scss">

</style>
